<!--  -->
<template>
<div>
    <div class='input-part'>
        <input type="text" v-model="content">
        <button @click="inserItem">插入</button>
    </div>
    <div>
        <!-- <li > -->
            <TodoListItem 
            v-for="(item, index) in list" :key="index"
                :item="item"
                :index="index"
                @deleteitem="deleteitem"
                @modifyItem="modifyItem"
           />
        <!-- </li> -->
        
    </div>
  
</div>
</template>

<script>
   import TodoListItem from '@/components/TodoListItem';

    export default {
        name:'TodoList',
        data() {
            return {
                content:'',
                list:[]
            };
        },
        components:{
            TodoListItem
        },
        //方法集合
        methods: {
            inserItem(){            //插入元素函数
                this.list.push(this.content);
            },
            deleteitem(index){           //删除元素函数
                this.list.splice(index,1);
            },
            modifyItem(index,newContent){ //修改元素函数
                this.list.splice(index,1,newContent);
            }
        },

    }
</script>
<style lang='scss' scoped>

</style>